<template>
	<div class="pageBox">
		<commonHeader></commonHeader>

		<div class="pageBoxContent">
            <div class="pageBoxContentTitle">设置</div>
            <div class="clearfix mt30" style="height:100%;">
                <div class="pageBoxContentItem fl">
                    <div class="settingBox">
                        <div class="settingBoxLeft">阀门编号1：</div>
                        <div class="settingBoxRight">
                            <input type="text" placeholder="请输入...">
                        </div>
                    </div>
                    <div class="settingBox">
                        <div class="settingBoxLeft">阀门编号1：</div>
                        <div class="settingBoxRight">
                            <input type="text" placeholder="请输入...">
                        </div>
                    </div>
                </div>
                <div class="pageBoxContentItem fr">
                    <div class="wid50">
                        <div class="settingBox" style="width:100%;">
                            <div class="settingBoxLeft">换气时间：</div>
                            <div class="settingBoxRight">
                                <el-input-number v-model="num"></el-input-number>
                            </div>
                        </div>
                        <div class="settingBox" style="width:100%;">
                            <div class="settingBoxLeft">进气时间：</div>
                            <div class="settingBoxRight">
                                <el-input-number v-model="num"></el-input-number>
                            </div>
                        </div>
                        <div class="settingBox" style="width:100%;">
                            <div class="settingBoxLeft">采样时间：</div>
                            <div class="settingBoxRight">
                                <el-input-number v-model="num"></el-input-number>
                            </div>
                        </div>
                        <div class="settingBox" style="width:100%;">
                            <div class="settingBoxLeft">采样频率：</div>
                            <div class="settingBoxRight">
                                <el-input-number v-model="num"></el-input-number>
                            </div>
                        </div>
                        <div class="settingBox" style="width:100%;">
                            <div class="settingBoxLeft">循环次数：</div>
                            <div class="settingBoxRight">
                                <el-input-number v-model="num"></el-input-number>
                            </div>
                        </div>
                    </div>
                    <div class="wid50">
                        <div class="settingBox" style="width:100%;">
                            <div class="settingBoxLeft">采样模式：</div>
                            <div class="settingBoxRight">
                                <el-select v-model="value" placeholder="请选择">
                                    <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                        </div>
                        <div class="settingBox" style="width:100%;">
                            <div class="settingBoxLeft">选择阀门：</div>
                            <div class="settingBoxRight">
                                <el-select v-model="value" placeholder="请选择">
                                    <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="pageBottomBox">
            <div class="pageBottomBoxItem">取消</div>
            <div class="pageBottomBoxItem" style="background-color:#00BB84;">保存</div>
        </div>
	</div>
</template>

<script>
	let interVal
	import commonHeader from '../commonComponents/commonHeader.vue'
	export default {
		components:{
			commonHeader
		},
		data () {
			return {
				num:60,
                options: [{
                    value: '选项1',
                    label: '黄金糕'
                    }, {
                    value: '选项2',
                    label: '双皮奶'
                    }, {
                    value: '选项3',
                    label: '蚵仔煎'
                    }, {
                    value: '选项4',
                    label: '龙须面'
                    }, {
                    value: '选项5',
                    label: '北京烤鸭'
                }],
                value: ''
			}
		},
		mounted(){

		},
		methods:{
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.pageBox{
		width: 100%;
		min-height: 100vh;
		background: #000;
		box-sizing: border-box;
		padding: 60px 0 90px;
		font-family: PingFang SC;
		font-style: normal;	
	}
    .pageBoxContent{
        width: 100%;
        min-height: calc(100vh - 150px);
        box-sizing: border-box;
        padding: 35px 40px;
    }
    .pageBoxContentTitle{
        color: #fff;
        font-size: 24px;
    }
    .pageBoxContentItem{
        width: calc(50% - 20px);
        height: 100%;
        display: flex;
		flex-direction: row;
        flex-wrap: wrap;
		align-items: flex-start;
		justify-content: space-between;
		-moz-flex-direction: row;
        -moz-flex-wrap: wrap;
		-moz-align-items: flex-start;
		-moz-justify-content: space-between;
		-ms-flex-direction: row;
        -ms-flex-wrap: wrap;
		-ms-align-items: flex-start;
		-ms-justify-content: space-between;
		-webkit-flex-direction: row;
        -webkit-flex-wrap: wrap;
		-webkit-align-items: flex-start;
		-webkit-justify-content: space-between;
    }
    .settingBox{
        width: 50%;
        display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		-moz-flex-direction: row;
		-moz-align-items: center;
		-moz-justify-content: flex-start;
		-ms-flex-direction: row;
		-ms-align-items: center;
		-ms-justify-content: flex-start;
		-webkit-flex-direction: row;
		-webkit-align-items: center;
		-webkit-justify-content: flex-start;
        margin-bottom: 15px;
        color: #fff;
        font-size: 18px;
    }
    .settingBoxLeft{
        width: 120px;
    }
    .settingBoxRight{
        width: calc(50% - 130px);
    }
    .settingBoxRight input{
        background: #45464B;
        border: 1px solid #7D7D7D;
        font-size: 18px;
        color: #fff;
        width: 200px;
        height: 44px;
        border-radius: 6px;
        box-sizing: border-box;
        padding-left: 10px;
    }
	.pageBottomBox{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 90px;
        background: #1E1F25;
        box-sizing: border-box;
        padding: 0 35px;
        display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
		-moz-flex-direction: row;
		-moz-align-items: center;
		-moz-justify-content: flex-end;
		-ms-flex-direction: row;
		-ms-align-items: center;
		-ms-justify-content: flex-end;
		-webkit-flex-direction: row;
		-webkit-align-items: center;
		-webkit-justify-content: flex-end;
    }
    .pageBottomBoxItem{
        width: 160px;
        height: 44px;
        border-radius: 22px;
        background-color: #7C7D84;
        color: #fff;
        font-size: 20px;
        text-align: center;
        line-height: 44px;
        margin-right: 10px;
        cursor: pointer;
    }
    .pageBottomBoxItem:nth-last-child(1){
        margin-right: 0;
    }
</style>

<style>
	.pageBoxContent .el-input-number .el-input__inner{
        background:#45464B !important;
        color: #fff !important;
        border: 1px solid #7D7D7D;
    }
    .pageBoxContent .el-input-number__decrease, .el-input-number__increase{
        background:#45464B !important;
        color: #fff !important;
    }
    .pageBoxContent .el-input--suffix .el-input__inner{
        background:#45464B !important;
        color: #fff !important;
        border: 1px solid #7D7D7D;
        width: 200px;
    }
</style>